<template>
  <div class="sc-label">
    <div class="sc-header">
      <div class="matirial" v-for="matirial in matirials" :key="matirial.order" @click="doPaint(matirial)">
        <img :src="matirial.src" alt="">
      </div>
    </div>
    <div class="sc-history">
      todo
    </div>
  </div>
</template>
<script>
import ImageFactory from './VImageMatirialFactory'
import deepCopy from '@/util/deepCopy'

export default {
  data () {
    return {
      matirials: [
        {
          src: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1487270986,909294005&fm=173&s=4D41BB446D2194531650C5120300D08B&w=550&h=280&img.JPEG',
          style: {
            fontSize: '30px',
            fontWeight: '900',
            color: '#131215',
            opacity: 1,
            transform: 'rotate(0deg)',
            top: '10px',
            left: '10px',
            textAlign: 'center',
            width: '',
            height: ''
          },
          type: 'vImage',
          order: 1,
          editting: false
        },
        {
          src: 'http://element.eleme.io/static/hamburger.50e4091.png',
          style: {
            fontSize: '25px',
            fontWeight: '700',
            color: 'black'
          },
          type: 'vImage',
          order: 2
        },
        {
          src: 'http://element.eleme.io/static/hamburger.50e4091.png',
          style: {
            fontSize: '20px',
            fontWeight: '500',
            color: 'black'
          },
          type: 'vImage',
          order: 2
        },
        {
          src: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=951701311,3217555300&fm=173&s=1F022EC1A84336CC96801083030050D2&w=640&h=730&img.JPEG',
          style: {
            fontSize: '16px',
            color: 'black'
          },
          type: 'vImage',
          order: 2
        },
        {
          src: 'http://element.eleme.io/static/hamburger.50e4091.png',
          style: {
            fontSize: '12px',
            fontWeight: '300',
            color: 'black'
          },
          type: 'vImage',
          order: 2
        }
      ]
    }
  },
  methods: {
    doPaint: function (obj) {
      this.$emit('paint', deepCopy.exec(ImageFactory(obj)))
    }
  }
}
</script>

<style lang="scss">
.sc-label {
  .sc-header {
    padding-top: 10px;
    overflow: hidden;
    .matirial {
      box-sizing: border-box;
      margin: 0;
      width: 46%;
      float: left;
      padding: 2%;
      &:hover {
        background: #d1d1d1;
        cursor: pointer;
        border-color:  #24ADDE;
      }
      img {
        display: block;
        width: 100%;
      }
    }
  }
  .sc-history {
    margin-top: 10px;
    border-top: 1px solid #24ADDE;
    width: 100%;
  }
}
</style>
